﻿<!DOCTYPE HTML>
<html>
<head>
<title>JSON格式化</title>
<meta name='referrer' content='always'/>
<link rel='shortcut icon' href='/favicon.ico'/>
<meta http-equiv='x-ua-compatible' content='ie=edge,chrome=1'/>
<meta http-equiv='content-type' content='text/html; charset=utf-8'/>
<meta name='viewport' content='width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'/>

<link href='/res/css/widget.css' type='text/css' rel='stylesheet'/>
<link href='/res/lib/jsonformat/format.css' type='text/css' rel='stylesheet'/>
<link href='/res/lib/jsonformat/format.css' type='text/css' rel='stylesheet'/>

<script src='/res/lib/jsonformat/format.js' type='text/javascript'></script>

<style>
body {
    width: 70vw;
    margin: auto;
    padding: 2vh 0px 0px;
}
#JsonText{
    width: 100%;
    padding: 4px;
    resize: vertical;
    max-height: 20vh;
    min-height: 100px;
    margin-top: -10px;
    font-size: 0.9rem;
    border: 1px solid #999;
}
#FormatButton{
    color: #FFF;
    border: none;
    padding: 4px 8px;
    box-shadow: none;
    background-color: #000;
}
#FormatButton:hover{
    color: #DDD;
}
#FormatButton:active{
    color: #090;
}
#FormatOutput{
    width: 100%;
    padding: 4px;
    overflow: auto;
    max-height: 50vh;
    min-height: 100px;
    margin-bottom: 24px;
    border: 1px solid #999;
}
#FormatCondTable{
    margin: 10px 0px;
}
#FormatCondTable a{
    text-decoration: none;
}
#FormatCondTable td{
    padding-right: 16px;
}
#FormatCondTable input{
    top: 1px;
    position: relative;
    padding-right: 2px;
}
#FormatCondTable select{
    padding: 2px 4px;
	border: 1px solid #AAA;
}
</style>

<script>
window.onload = function(){
    var key = 'session_json_text';
    var msg = sessionStorage.getItem(key);
    var text = document.getElementById('JsonText');

    function isJsonString(str){
        try{
            JSON.parse(str);
            return true;
        }
        catch(e){
            return false;
        }
    }

    if (msg){
        if (isJsonString(msg)){
            text.value = msg;
        }
    }
    else{
        text.value = '[{"link": "https://www.winfengtech.com", "name": "winfeng", "desc": {"type": 10000, "text": "xungen"}}]';
    }

    function format(){
        window.jf = new JsonFormatter({
            dom: document.getElementById('FormatOutput'),
            tabSize: document.getElementById('TabSize').value,
            quoteKeys: document.getElementById('QuoteKeys').checked,
            isCollapsible: document.getElementById('CollapsibleView').checked,
        });
        if (text.value && isJsonString(text.value)){
            jf.doFormat(text.value);
            sessionStorage.setItem(key, text.value);
        }
    }

    document.getElementById('ExpandAll').addEventListener('click', function(){
        window.jf.expandAll();
    });

    document.getElementById('CollapseAll').addEventListener('click', function(){
        window.jf.collapseAll();
    });

    document.getElementById('FormatButton').addEventListener('click', function(){
        format();
    });

    var x = document.querySelectorAll('#CollapsibleView, #QuoteKeys, #TabSize');
    Array.prototype.forEach.call(x, function(el, i){
        el.addEventListener('change', function(){
            format();
        });
    });

    if (text.value) format();
}
</script>
</head>

<body>
    <div>
        <h3>原文</h3>
        <textarea id='JsonText'></textarea>
    </div>
    <div>
        <table id='FormatCondTable'>
            <tr>
                <td><button id='FormatButton'>格式化</button></td>
                <td>
                    缩进
                    <select id='TabSize'>
                        <option value='1'>1</option>
                        <option value='2' selected>2</option>
                        <option value='3'>3</option>
                        <option value='4'>4</option>
                        <option value='5'>5</option>
                        <option value='6'>6</option>
                    </select>
                </td>
                <td><input type='checkbox' id='QuoteKeys' checked='checked'/>引号</td>
                <td><input type='checkbox' id='CollapsibleView' checked='checked'/>缩进控制</td>
                <td>
                    <a href='javascript:void(0)' id='ExpandAll'>展开</a>
                    <a href='javascript:void(0)' id='CollapseAll'>叠起</a>
                </td>
            </tr>
        </table>
    </div>
    <div id='FormatOutput'></div>
</body>
</html>